<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic CheckBox - jQuery EasyUI Demo</title>
	<script type="text/javascript" src="../easyui-config.js"></script>
</head>
<body>
	<h2>Basic CheckBox</h2>
	<form id="ff">
		<div style="margin-bottom:20px">
			<input class="easyui-checkbox" name="fruit" value="Apple" label="Apple:">
		</div>
		<div style="margin-bottom:20px">
			<input class="easyui-checkbox" name="fruit" value="Orange" label="Orange:">
		</div>
		<div style="margin-bottom:20px">
			<input class="easyui-checkbox" name="fruit" value="Banana" label="Banana:">
		</div>
		
		<div>
			<div id="ck"></div>
		</div>
		<div>
			<div id="ck2"></div>
		</div>
		<script>
		$(()=>{
		
			$('#ck').checkbox({
				label: 'Apple:',
				value: 'Apple',
				checked: true,
				width:20,
				height:30,
				disabled:true,
				labelWidth:120,/* 复选框与文本间距 */
				labelPosition:'after',/* label文本的位置 'before','after','top'*/
				labelAlign:'right'/* 'left','right' */
				
			});
			$('#ck2').checkbox({
				label: '复选框文本:',
				value: '复选框值',
				checked: true,
				onChange:function(checked){
					console.log(checked);
					$.messager.tip( { msg: checked===true ? '复选框被选中':'复选框取消选中',icon:'info' } );
			
				}
				
			});
		
		});
		</script>
	</form>
</body>
</html>